<html data-dpr="3" style="font-size: 37.5px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>攻略点评 - 骡窝窝</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,address=no">
    <meta name="referrer" content="always" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="no" />

    <link href="/css/mobile+css+head-mobile+css+ui-mobile+css+head_rem^Z1w^1535539097.css" rel="stylesheet" type="text/css">
    <link href="/css/mobile+css+head_rem-mobile+css+mdd+poi_detail_v2^Z10^1535539097.css" rel="stylesheet" type="text/css">

    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        var params;
        var user;
        var reviewArr = [];
        var totalPage;
        var sTitle;

        // 分页数据
        var currentPage = 1;

        // 查询点评
        function getReviews(){
            $.get("/strategies/" + params.strategyId + "/reviews", {currentPage: currentPage, pageSize: 5}, function (data) {
                $.merge(reviewArr, data.list)
                var json = {
                    list: reviewArr
                }
                // 渲染数据
                $("#reviews").renderValues(json, {
                    getHref: function (item, value) {
                        var href = $(item).data("href");
                        $(item).attr('href', href + value);
                    },
                    getUser: function (item, value) {
                        var href = $(item).data("href");
                        $(item).attr('href', href + value);
                    },
                    getStar: function (item, value) {
                        var style = $(item).data("style");
                        var str = value * 20 + '%;';
                        style = style + str;
                        $(item).attr('style', style);
                    },
                    getContent: function (item, value) {
                        var content;
                        if (value){
                            content = value.substring(0, 80);
                            content += "...";
                        }
                        $(item).attr("data-content", value);
                        $(item).html(content);
                    },
                    getCovers: function (item, value) {
                        imgArr = value.split(","),
                        $.each(imgArr, function (index, ele) {
                            $(item).append('<a class="photo_detail" data-transition="fade"><img src="'+ele+'" alt=""></a>')
                        })
                    },
                    fav: function (item, value) {
                        $(item).attr('onclick', "addFav("+value+",this)");
                        isFav(item, value)
                    },
                    collapse: function (item, value) {
                        $(item).attr('onclick', "sc(this)");
                    }
                })
                totalPage = data.lastPage;
                currentPage = currentPage + 1;
            })
        }

        // 回显点赞
        function isFav(item, sid) {
            if (user){
                $.ajax({
                    url: "/users/"+user.id+"/sreviews/"+sid+"/issfav",
                    async: false, // key
                    success: function (data) {
                        if (data){
                            $(item).addClass("active");
                        }
                    }
                })
            }
        }

        // 点赞
        function addFav(sid, item) {
            if(!user){
                $(document).dialog({
                    type : 'confirm',
                    closeBtnShow: true,
                    content: '登陆后才可以收藏, 现在登录?',
                    onClickConfirmBtn: function(){
                        location.href = "/login.html?authorId=666";
                    }
                });
            }else{
                toggleFav(sid, item)
            }
        }

        // 切换点赞图标
        function toggleFav(sid, item) {
            var fc = $(item).siblings(".o").html();
            if ($(item).hasClass("active")){
                $.ajax({
                    url: "users/"+user.id+"/sreviews/"+sid+"/delsfav",
                    data: {uid: user.id, sid: sid},
                    type: "DELETE",
                    success: function (data) {
                        if(data.success){
                            $(item).removeClass("active");
                            $(item).siblings(".o").html(" "+(parseInt(fc) - 1));
                        }
                    }
                })
            } else {
                $.ajax({
                    url: "users/"+user.id+"/sreviews/"+sid+"/addsfav",
                    data: {uid: user.id, sid: sid},
                    type: "PUT",
                    success: function (data) {
                        if(data.success){
                            $(item).addClass("active");
                            $(item).siblings(".o").html(" "+(parseInt(fc) + 1));
                        }
                    }
                })
            }
        }

        // 回显星点评级区
        function rating(){
            $.get("/strategies/" + params.strategyId + "/allreviews", function (data) {
                var ratingCount = 0;
                var ratingSum = 0
                var arrPer = [0, 0, 0, 0, 0]
                $.each(data, function(index, ele){
                    ratingCount = ratingCount + 1;
                    ratingSum += ele.rating;
                    if(ele.rating == 1){
                        arrPer[0] = arrPer[0] + 1;
                    }else if(ele.rating == 2){
                        arrPer[1] = arrPer[1] + 1;
                    }else if(ele.rating == 3){
                        arrPer[2] = arrPer[2] + 1;
                    }else if(ele.rating == 4){
                        arrPer[3] = arrPer[3] + 1;
                    }else if(ele.rating == 5){
                        arrPer[4] = arrPer[4] + 1;
                    }
                })
                var num = ratingSum / ratingCount
                var avgRating = num.toFixed(1);
                //avgRating.substring(0,avgRating.lastIndexOf('.')+2)
                var one = (arrPer[0] / ratingCount * 100 + "").substring(0,4) + "%;'";
                var two = (arrPer[1] / ratingCount * 100 + "").substring(0,4) + "%;'";
                var three = (arrPer[2] / ratingCount * 100 + "").substring(0,4) + "%;'";
                var four = (arrPer[3] / ratingCount * 100 + "").substring(0,4) + "%;'";
                var five = (arrPer[4] / ratingCount * 100 + "").substring(0,4) + "%;'";
                $("#avgRating").html(avgRating);
                $("#reviewers").html("来自 "+ratingCount+" 位骡友的点评");
                $("#5s").attr("style", "width:" + five);
                $("#4s").attr("style", "width:" + four);
                $("#3s").attr("style", "width:" + three);
                $("#2s").attr("style", "width:" + two);
                $("#1s").attr("style", "width:" + one);
            })
        }

        // 隐藏文本
        function sc(item){
            if (!$(item).hasClass("o")) {
                $(item).prev().html($(item).prev().data("content"));
                $(item).attr("style", 'padding: 0.373rem 0;text-align: center;line-height: 1rem;background: url(/img/i_poi_2.png) no-repeat;background-size: 2.6rem;background-position: -1.706rem 0;margin-left: 45%;')
                $(item).addClass("o")
            } else {
                $(item).prev().html($(item).prev().data("content").substring(0, 80));
                $(item).attr("style", 'padding: 0.373rem 0;text-align: center;line-height: 1rem;background: url(/img/i_poi.png) no-repeat;background-size: 2.6rem;background-position: -1.706rem 0;margin-left: 45%;')
                $(item).removeClass("o")
            }
        }

        $(function () {
            params = getParams();
            user = JSON.parse(sessionStorage.getItem("user"));

            // 默认查第一页
            getReviews();

            // 获取评分区数据
            rating();

            // 点击加载更多
            $("#_j_getMore").click(function () {
                if (totalPage >= currentPage){
                    getReviews();
                }else{
                    $(document).dialog({
                        type : 'notice',
                        infoText: '没有更多啦',
                        autoClose: 500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            });

            // 写点评
            $("#write").click(function () {
                if (user){
                    var placeName = decodeURI(params.stitle).substring(0,2);
                    location.href = "/mine/strategyReview_form.html?strategyId="+ params.strategyId +"&stitle="+placeName;
                } else {
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: true,
                        content: '登陆后才可以写点评, 现在登录?',
                        onClickConfirmBtn: function(){
                            location.href = "/login.html?authorId=666";
                        }
                    });
                }
            })
        });
    </script>
</head>

<body style="font-size: 24px;">

    <div id="pos38"></div>
    <header class="head2home">
        <a href="/" class="logo"></a>
        <div class="rBtn">
            <a href="/" class="home">官网首页</a>
            <a href="/search.php" class="sch"></a>
        </div>
    </header>
    <div class="space"></div>
    <div class="comment">
        <div class="bd">
            <div class="score">
                <p><strong id="avgRating"></strong> 分</p>
                <p class="t2" id="reviewers"></p>
            </div>
            <div class="chart">
                <ul>
                    <li>
                        <div class="star">5<i></i></div>
                        <div class="bar"><span id="5s" ></span></div>
                    </li>
                    <li>
                        <div class="star">4<i></i></div>
                        <div class="bar"><span id="4s" ></span></div>
                    </li>
                    <li>
                        <div class="star">3<i></i></div>
                        <div class="bar"><span id="3s" ></span></div>
                    </li>
                    <li>
                        <div class="star">2<i></i></div>
                        <div class="bar"><span id="2s" ></span></div>
                    </li>
                    <li>
                        <div class="star">1<i></i></div>
                        <div class="bar"><span id="1s" ></span></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list" style="margin-bottom: 60px;">
            <style>
                .comment .list .photos>div{
                    position: absolute;bottom: 0;width:97%;height: 0.8rem;background: rgba(0,0,0,0.6);text-align: right;color: #fff;font-size: 0.36rem;line-height: 0.8rem;
                }
                .comment .list .photos.img1 a{
                    width: 4.4rem;height: 4rem;float:left;
                }
                .comment .list .photos.img1 a:last-child>div{
                    width: 4.4rem;height: 4rem;float:left;position:relative;
                }
                .comment .list .photos.img1 a:last-child>div>div{
                    width: 100%;height: 100%;
                }
                .comment .list .photos.img1 a:last-child>div>div:last-child{
                    background: rgba(0,0,0,0.6);top: 0;
                }
                .comment .list .photos.img1 a:last-child>div>div:last-child img{
                    width:0.6rem;height:0.6rem;margin: 1.7rem 1.9rem;
                }
                .comment .list .photos.img1 a:last-child>div>div:last-child:after{
                    content:'多图';position: absolute;right: 10px;bottom: 10px;color: white;font-size: 14px;
                }
                .comment .list .photos.img1 a img{
                    width:100%;height:100%;
                }
                .comment .list .photos.img2 a:first-child{
                    width: 5.4rem;height: 4rem;float:left;
                }
                .comment .list .photos.img2 a{
                    width: 3.2rem;height: 2rem;float:left;
                }
                .comment .list .photos.img2 a img{
                    width:100%;height:100%;
                }
                .comment .list .photos.img2 a:last-child>div{
                    width: 3.2rem;height: 1.9rem;margin-top: 0.1rem;float: left;position: relative;background: rgba(0,0,0,0.6);
                }
                .comment .list .photos.img2 a:last-child>div:after{
                    content:'多图';position: absolute;right: 6px;bottom: 6px;color: white;font-size: 12px;
                }
                .comment .list .photos.img2 a:last-child img{
                    width:0.6rem;height:0.6rem;margin: 0.65rem 1.3rem;
                }
            </style>
            <div id="reviews">
                <ul render-loop="list">
                    <li>
                        <dl>
                            <dt>
                                <a data-href="/mine/userProfiles.html?id=" render-key="list.user.id" render-fun="getUser" target="" rel="nofollow">
                                    <img render-src="list.user.headImgUrl">
                                </a>
                            </dt>
                            <dd>
                                <p render-html="list.user.nickName"><span class="lv">Lv.36</span></p>
                                <div class="stars"><span data-style='width:' render-key="list.rating" render-fun="getStar"></span></div><!--style="width:100%;"-->
                                <div class="time" render-html="list.createTime"></div>
                            </dd>
                        </dl>
                        <div class="context" render-key="list.content" render-fun="getContent"></div>
                        <a render-key="list.content" render-fun="collapse" >
                            <div class="collapse" style="padding: 0.373rem 0;text-align: center;line-height: 1rem;background: url(/img/i_poi_2.png) no-repeat;background-size: 2.6rem;background-position: -1.706rem 0;margin-left: 45%;"></div>
                        </a>

                        <div class="photos clearfix" style="position: relative;" render-key="list.coverUrls" render-fun="getCovers">
                        </div>

                        <div class="from">属于攻略分类: <a data-href="/strategyCatalogs.html?strategyId=" render-key="list.strategy.id" render-fun="getHref" ><span>《</span><span render-html="list.strategy.title"></span><span>》</span></a></div>
                        <div class="like-show">
                            <div class="row">
                                <a class="like " render-key="list.id" render-fun="fav"></a>
                                <span class="o" render-html="list.favs"></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <script>
                /*$('.collapse').each(function(i){
                    $('.collapse').eq(i).click(function(){
                        $(this).parent().prev().html($(this).parent().prev().data('content'));
                        $(this).parent().remove();
                    });
                });*/
            </script>
        </div>
        <div><a class="btn-getmore" id="_j_getMore" style="">加载更多</a></div>
        <section class="fixedbar"><a id="write"><i></i>写点评</a></section>
    </div>
</body>
</html>